<template>
  <div>
    <el-card v-loading="loading">
      <el-table :data="tableData">
        <el-table-column type="index" width="65" align="center">
        </el-table-column>
        <el-table-column label="实验题目" align="center">
          <template slot-scope="scope">
            <el-button type="text">{{ scope.row.experimentTitle }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="开放时间" align="center">
          <template slot-scope="scope">
            <div>
              <span>{{ timeSlot[scope.row.timerSlotId - 1].timeSlotName}}：{{timeSlot[scope.row.timerSlotId - 1].startTime}}--{{timeSlot[scope.row.timerSlotId - 1].endTime}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实验报告数量" align="center">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.realSubmit === scope.row.shouldSubmit">
                <span>已交齐（{{ scope.row.shouldSubmit }}）</span>
              </div>
              <div v-else>
                <span>已交：{{ scope.row.realSubmit }} 未交：{{scope.row.shouldSubmit - scope.row.realSubmit}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实验报告处理进度" align="center">
          <template slot-scope="scope">
            <el-button type="text">完成</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      timeSlot: [],
      weekClass: ['每周上课', '单周上课', '双周上课', '整周上课'],
      weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
  },
  created() {
    this.getTimeSlot()
  },
  methods: {
    getList() {
      this.loading = true
      request.get(`/items/labStudentExperimentTask/${this.$route.params.id}`).then(res => {
        if (!res.code) {
          this.tableData = res.content.records
          this.loading = false
        }
      })
    },
    async getTimeSlot() {
      await request.get('/items/labTimerSlot').then(res => {
        if (!res.code) {
          this.timeSlot = res.content
        }
      })
      console.log(this.timeSlot)
      await this.getList()
    }
  }
}
</script>
